<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banner"><image :src="item.img_url" mode="widthFix"></image></swiper-item>
		</swiper>

		<scroll-view scroll-x="true">
			<view class="cate">
				<view v-for="(item, index) in cate" :key="index" >
					<image :src="item.cover_url" mode=""></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>

		<van-tabs   class="tab" @click="handlerClick" >
			<van-tab title="畅销" name="sales"></van-tab>
			<van-tab title="新书" name="new"></van-tab>
			<van-tab title="精选" name="recommend"></van-tab>
		</van-tabs>
			
		<view class="con">
			<view v-for="(item,index) in goods"class="item">
				<image :src="item.cover_url" mode="widthFix"></image>
				<text>{{item.description}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
import { getIndex } from '../../request/api.js';
export default {
	data() {
		return {
			banner: [],
			cate: [],
			active: 'sales',
			goods:[],
			page:1
		};
	},
	onLoad() {
		getIndex({[this.active]:1}).then(res => {
			console.log(res);
			this.banner = res.slides;
			this.cate = res.goods.data;
			this.goods = res.goods.data;
			
		});
		// 这里传参为什么传中括号 因为这里的key值是一个变量 

	},
	methods: {
		handlerClick(e){
			console.log(e);
			this.active=e.detail.name;
			this.goods=[];
			
			this.getData();
		},
		getData(){
			getIndex({[this.active]:1,page:this.page}).then(res=>{
				console.log(res);
				this.goods=[...this.goods,...res.goods.data]
			})
		}
	},
	onReachBottom() {
		this.page++;
		this.getData()
	},
	//上拉加载
	onPullDownRefresh() {
		this.goods=[];
		this.page=1;
		this.getData();
	}
	
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.swiper {
		width: 100%;
		image {
			width: 100%;
		}
	}
	.cate {
		display: flex;
		flex-wrap: nowrap;
		view {
			width: 200rpx;
			flex-shrink: 0;
			image {
				width: 100%;
			}
		}
	}
	.tab {
		width: 100%;
		position: sticky;
		top: 0px;
		left:0px;
	}
	.con{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-around;
		.item{
			width: 48%;
			image{
				width: 100%;
			}
		}
	}
}
</style>
